<template>
  <div class="main theme-dark">
    <div class="recharge-open">
      <div class="bgpart">
        <div class="rechargeOpen">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" :tab="$t('recharge')">
              <div class="open-header f-item">
                <a-tabs
                  :default-active-key="addressIndex"
                  tab-position="left"
                  @change="addressChange"
                >
                  <a-tab-pane v-for="(item, index) in addressSource" :key="index" :tab="item">
                    <div
                      :ref="'qrcode' + index"
                      :id="'qrcode' + index"
                      style="width: 150px; height: 150px; margin: 0 auto; overflow: hidden"
                    ></div>
                    <p class="textaddress">{{ $t('Currency address') }}</p>
                    <p class="address">{{ data[item] }}</p>
                    <button :data-clipboard-text="data[item]" class="qr-btn">
                      {{ $t('copy address') }}
                    </button>
                  </a-tab-pane>
                </a-tabs>

                <!--                <div id="qrcode" style="width: 150px; height: 150px; margin: 0 auto"></div>-->
                <!--                <p class="textaddress">Currency address</p>-->
                <!--                <div v-for="item in addressSource" :key="item" class="mt20">-->
                <!--                  <div class=" ">-->
                <!--                    <div class="ant-statistic-title">{{ item }}</div>-->
                <!--                    <span class="address"> {{ data[item] }} </span>-->
                <!--                  </div>-->
                <!--                  <button :data-clipboard-text="data[item]" class="qr-btn">copy address</button>-->
                <!--                </div>-->
              </div>
              <div class="open-header f-item mt20">
                <div class="mb-10 text-sm">
                  <span>
                    {{ $t('Please do not recharge anything other than the above address') }}
                  </span>
                  <span>USDC </span>
                  <span>{{ $t('Assets') }}，</span>
                  <span>{{ $t('Otherwise the assets will not be retrieved') }}。</span>
                </div>
                <div class="mb-10 text-sm">
                  <span>USDC </span>
                  <span>
                    {{
                      $t(
                        'The deposit only supports the simple send method, the deposit using other methods cannot be posted temporarily, please understand'
                      )
                    }}.。
                  </span>
                </div>
                <div class="mb-10 text-sm">{{ $t('rechargeTip1') }}.</div>
                <div class="mb-10 text-sm">{{ $t('rechargeTip2') }}。</div>
                <div class="mb-10 text-sm">{{ $t('rechargeTip3') }}。</div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" :tab="$t('Recharge record')">
              <div>
                <!--                <div class="pt50 pb20 ft16">Recharge record</div>-->
                <div class="el-table el-table--fit el-table--enable-row-hover" style="width: 100%">
                  <a-table :columns="columns" :data-source="list" :pagination="false"></a-table>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Table, message } from 'ant-design-vue'
// import Upload from '@/components/Upload.vue'
import Clipboard from 'clipboard'
import { getAssetsRechargeMy } from '@/api/asset'
import QRCode from 'qrcodejs2'

export default {
  components: {
    ATable: Table
    // Upload
  },
  data() {
    return {
      columns: [
        {
          title: this.$t('Amount'),
          dataIndex: 'amount',
          width: 150
        },
        {
          title: this.$t('CoinType'),
          dataIndex: 'chainType'
        },
        {
          title: this.$t('hash'),
          dataIndex: 'hash'
        },
        {
          title: this.$t('Time'),
          dataIndex: 'createTime'
        }
      ],
      loading: false,
      form: {
        amount: 100,
        img: '',
        id: ''
      },
      list: [],
      data: {
        address: ''
      },
      addressSource: [],
      addressIndex: 0
    }
  },
  methods: {
    loadAssetsRechargeMy() {
      getAssetsRechargeMy().then((res) => {
        this.list = res.data
      })
    },
    addressChange(val) {
      if (val !== this.addressIndex) {
        this.addressIndex = val
        setTimeout(() => {
          this.generateQRCode()
        }, 500)
      }
    },
    generateQRCode() {
      const { addressSource, data, addressIndex } = this
      const key = addressSource[addressIndex]
      new QRCode('qrcode' + addressIndex, {
        text: data[key],
        width: 150,
        height: 150,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    }
  },
  mounted() {
    const vm = this
    this.data = this.$route.query.data && JSON.parse(this.$route.query.data)
    this.addressSource = Object.keys(this.data)
    this.form.id = this.data.id
    this.loadAssetsRechargeMy()
    setTimeout(function () {
      vm.generateQRCode()
    }, 500)
    const clipboard = new Clipboard('.qr-btn')
    clipboard.on('success', () => {
      console.log('复制成功')
      message.success('copy success')
      // 释放内存
      clipboard.destroy()
    })
    clipboard.on('error', () => {
      // 不支持复制
      console.log('该浏览器不支持自动复制')
      message.error('copy fail')
      // 释放内存
      clipboard.destroy()
    })
  }
}
</script>

<style lang="scss" scoped>
.opacity0 {
  opacity: 0;
}

.main {
  background-color: #0b0e11;

  .recharge-open {
    width: 1000px;
    margin: 0 auto;
    min-height: 100vh;
    padding-top: 20px;

    .open-header {
      text-align: center;
      padding: 40px 0;

      .textaddress {
        color: #999;
        margin-top: 20px;
      }

      .address {
        margin: 20px 0 40px;
        font-size: 24px;
      }

      .qr-btn {
        padding: 0 40px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        height: 44px;
        border-radius: 20px;
        margin: 0 auto;
        font-size: 16px;
        color: #212833;
        cursor: pointer;
        background: #fcd535;
      }
    }
  }

  .open-form {
    display: block;
    margin: 20px 0;
    font-size: 14px;

    .text {
      display: block;
      margin: 20px 0;
      font-size: 14px;
    }

    .flex-a {
      width: 140px;
      height: 140px;
      position: relative;
      margin: 0 auto;
    }

    .poImg {
      position: absolute;
      width: 140px;
      height: 140px;
      top: 0;
      left: 0;
    }
  }

  .sub-btn {
    width: 400px;
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    background: #fcd535;
    color: #212833;
    margin: 50px auto 0;
    cursor: pointer;
  }
}

.ant-statistic-title {
  margin-bottom: 4px;
  color: #999;
  font-size: 14px;
}
</style>
